<template>
  <div class="bl-details-modal-container" id="bl-details-modal-container">
    <a-modal
      :visible.sync="visible"
      title="实验数据"
      width="1380px"
      wrapClassName="detail-modal-warp"
      :footer="null"
      :getContainer="getContainer"
      @cancel="handleClick()"
    >
      <div class="detail-modal-body" v-loading="loading">
        <div class="table-contaier">
          <vxe-table
            align="center"
            border
            :data="table.source"
            show-overflow
            show-header-overflow
            show-footer-overflow
            show-footer
            :column-config="{ resizable: true }"
            class="scrollbarStyle"
            height="500px"
            :sort-config="{ trigger: 'cell' }"
            ref="xTable"
            :scroll-x="{ gt: 10 }"
            :scroll-y="{ gt: 100 }"
            row-id="id"
            :checkbox-config="{
              reserve: true,
            }"
            @toggle-row-expand="toggleExpandChangeEvent"
            ><vxe-column type="expand" width="40">
              <template #content="{ row }">
                <div class="subTable-container">
                  <vxe-table
                    ref="xTable"
                    min-height="120px"
                    max-height="528px"
                    class="scrollbarStyle"
                    align="center"
                    show-overflow
                    show-header-overflow
                    :data="row.dataList"
                    :column-config="{ resizable: true }"
                  >
                    <vxe-column field="kyhz" title="抗压荷载(Kn)"> </vxe-column>
                    <vxe-column field="kyqd" title="抗压强度(MPa)">
                    </vxe-column>
                  </vxe-table>
                </div>
              </template>
            </vxe-column>
            <vxe-column type="seq" width="60" title="序号"></vxe-column>
            <vxe-column field="curingAge" title="龄期(天)"> </vxe-column>
            <vxe-column field="trialDate" title="试验时间"> </vxe-column>
            <vxe-column field="testValue" title="强度代表值(MPa)"> </vxe-column>
            <vxe-column field="result" title="试验结果">
              <template #default="{ row }">
                <div v-if="row.result == 0">合格</div>
                <div v-if="row.result == 1">不合格</div>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
        <!-- 分页 -->
        <!-- <div class="pager-contaier">
          <vxe-pager
            background
            :current-page.sync="pager.page"
            :page-size.sync="pager.pageSize"
            :total="pager.total"
            :layouts="[
              'PrevPage',
              'JumpNumber',
              'NextPage',
              'Sizes',
              'FullJump',
            ]"
            @page-change="paginationChange"
          >
            <template #left>
              <div class="vxe-pager-left-tip-container">
                第<span>1</span>到<span
                  >{{ Math.ceil(pager.total / pager.pageSize) || 1 }}页 </span
                >共<span>{{ pager.total }}</span
                >条记录
              </div>
            </template>
          </vxe-pager>
        </div> -->
      </div>
    </a-modal>
  </div>
</template>
<script>
import { getSYList } from "@/api/wisdom-beam/collect-app.js";
//布料【弹窗】
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    dataSource: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getData();
        } else {
          this.table.source = [];
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      loading: false,
      table: {
        source: [],
      },
      //分页
      pager: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  mounted() {},
  methods: {
    //展开行
    toggleExpandChangeEvent(event) {
      let { expanded, row, $rowIndex } = event;
      if (expanded) {
        return new Promise((resolve, reject) => {
          //   getBYJLChildList({ id: row.id })
          //     .then((res) => {
          //       let { data } = res;
          //       this.$set(
          //         this.tableData[$rowIndex],
          //         "subData",
          //         data?.result || []
          //       );
          //       resolve();
          //     })
          //     .catch((_) => {
          //       reject();
          //     });
        });
      }
    },
    getData() {
      return new Promise((resolve, reject) => {
        this.loading = true;
        let { componentParts } = this.dataSource;
        let { page, pageSize } = this.pager;
        getSYList({
          componentParts: componentParts,
        })
          .then((res) => {
            let { data } = res;
            this.table.source = data?.result || [];
            resolve();
          })
          .catch((_) => {
            this.table.source = [];
            reject();
          })
          .finally((_) => {});
        this.loading = false;
      });
    },

    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getData();
    },
    getContainer() {
      return document.getElementById("dashboard-container");
    },

    //关闭
    handleClick() {
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="less" scoped>
.bl-details-modal-container {
  /deep/.ant-modal-body {
    padding: 0;
  }
  .detail-modal-body {
    height: 600px;
    overflow: hidden;
    .flex();
    flex-direction: column;
    .table-contaier {
      flex: 1;
      padding: 20px;
      overflow: hidden;
      tr {
        .multiline-item {
          margin: 2px 0;
        }
        .result-td {
          &.ok {
            color: #4bc964;
          }
          &.error {
            color: #ff3f4a;
          }
        }
      }
    }
    .pager-contaier {
      flex-shrink: 0;
      height: 80px;
      .flex();
      align-items: center;
      padding: 0 20px;
      justify-content: flex-end;
      /deep/.vxe-pager {
        padding-right: 0;
      }
    }
  }
}
</style>
